<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生管理系统</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    body {
      padding-top: 56px;
      background-color: #f5f5f5;
    }
    .navbar-brand {
      font-weight: bold;
    }
    .sidebar {
      background-color: #e3f2fd;
      min-height: calc(100vh - 56px);
      padding: 20px 0;
    }
    .sidebar .nav-link {
      color: #333;
      padding: 10px 20px;
      margin: 5px 0;
      border-radius: 5px;
    }
    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #bbdefb;
      color: #1565c0;
    }
    .content {
      padding: 20px;
      min-height: calc(100vh - 56px - 60px);
    }
    .student-table th {
      background-color: #e9ecef;
    }
    .footer {
      background-color: #343a40;
      color: white;
      padding: 15px 0;
      text-align: center;
    }
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 (Header) -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">学生管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?name=管理员&background=0D8ABC&color=fff" alt="管理员头像" class="avatar me-2">
            欢迎管理员登录

          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>个人信息</a></li>
            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>系统设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <!-- 左侧导航栏 (Left) -->
    <div class="col-md-2 d-none d-md-block sidebar">
      <h4 class="text-center mb-4">功能菜单</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#"><i class="fas fa-users me-2"></i>学生管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-chalkboard-teacher me-2"></i>教师管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-book me-2"></i>课程管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-chart-bar me-2"></i>成绩统计</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-cog me-2"></i>系统设置</a>
        </li>
      </ul>
    </div>

    <!-- 右侧内容区域 (Right) -->
    <div class="col-md-10 content">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>学生信息管理</h2>
        <button class="btn btn-primary"><i class="fas fa-plus me-2"></i>新增学生</button>
      </div>

      <!-- 学生信息表格 -->
      <div class="table-responsive">
        <table class="table table-hover table-bordered student-table">
          <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>密码</th>
            <th>性别</th>
            <th>班级</th>
            <th>生日</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody id="studentTableBody">
          <!-- 学生数据将通过JavaScript动态生成 -->
          </tbody>
        </table>
      </div>

      <!-- 分页控件 -->
      <nav aria-label="学生列表分页">
        <ul class="pagination justify-content-center" id="pagination">
          <!-- 分页将通过JavaScript动态生成 -->
        </ul>
      </nav>
    </div>
  </div>
</div>

<!-- 底部区域 (Footer) -->
<footer class="footer mt-auto">
  <div class="container">
    <span>广东科学技术职业学院课堂</span>
  </div>
</footer>

<div id="footer-container"></div>

<!-- Bootstrap & jQuery JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // 模拟学生数据
  const studentData = [
    { id: 101, name: "张三", password: "123456", gender: "男", className: "13软件1", birthday: "1996-05-12" },
    { id: 102, name: "李四", password: "abcdef", gender: "女", className: "13软件2", birthday: "1997-08-23" },
    { id: 103, name: "王五", password: "qwerty", gender: "男", className: "13软件1", birthday: "1996-11-07" },
    { id: 104, name: "李牧尘", password: "1111", gender: "女", className: "13软件1", birthday: "1997-12-05" },
    { id: 105, name: "刘红枫", password: "0000", gender: "男", className: "13软件2", birthday: "1995-11-15" },
    { id: 106, name: "昭", password: "123", gender: "女", className: "13软件3", birthday: "1998-03-20" },
    { id: 107, name: "赵六", password: "pass123", gender: "男", className: "13软件2", birthday: "1997-02-14" },
    { id: 108, name: "钱七", password: "test456", gender: "女", className: "13软件1", birthday: "1996-09-30" }
  ];

  // 分页设置
  const studentsPerPage = 5;
  let currentPage = 1;

  // 初始化页面
  $(document).ready(function() {
    renderStudentTable();
    renderPagination();

    // 为删除按钮添加事件监听
    $(document).on('click', '.delete-btn', function() {
      const studentId = $(this).data('id');
      if(confirm('确定要删除该学生信息吗？')) {
        // 在实际应用中，这里应该发送AJAX请求到服务器删除数据
        alert(`学生ID ${studentId} 已被删除（演示功能）`);
      }
    });
  });

  // 渲染学生表格
  function renderStudentTable() {
    const tableBody = $('#studentTableBody');
    tableBody.empty();

    const startIndex = (currentPage - 1) * studentsPerPage;
    const endIndex = Math.min(startIndex + studentsPerPage, studentData.length);

    for (let i = startIndex; i < endIndex; i++) {
      const student = studentData[i];
      const row = `
                    <tr>
                        <td>${student.id}</td>
                        <td>${student.name}</td>
                        <td>${student.password}</td>
                        <td>${student.gender}</td>
                        <td>${student.className}</td>
                        <td>${student.birthday}</td>
                        <td>
                            <button class="btn btn-sm btn-warning me-1"><i class="fas fa-edit"></i> 编辑</button>
                            <button class="btn btn-sm btn-danger delete-btn" data-id="${student.id}"><i class="fas fa-trash"></i> 删除</button>
                        </td>
                    </tr>
                `;
      tableBody.append(row);
    }
  }

  // 渲染分页控件
  function renderPagination() {
    const pagination = $('#pagination');
    pagination.empty();

    const totalPages = Math.ceil(studentData.length / studentsPerPage);

    // 添加上一页按钮
    const prevButton = `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage - 1}">Previous</a>
            </li>`;
    pagination.append(prevButton);

    // 添加页码按钮
    for (let i = 1; i <= totalPages; i++) {
      const pageItem = `<li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>`;
      pagination.append(pageItem);
    }

    // 添加下一页按钮
    const nextButton = `<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage + 1}">Next</a>
            </li>`;
    pagination.append(nextButton);
  }

  // 分页点击事件
  $(document).on('click', '.page-link', function(e) {
    e.preventDefault();
    const page = parseInt($(this).data('page'));
    if (!isNaN(page) && page >= 1 && page <= Math.ceil(studentData.length / studentsPerPage)) {
      currentPage = page;
      renderStudentTable();
      renderPagination();
    }
  });

</script>
</body>
</html>